<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>医生管理</title>
    <div th:insert="user/common::head"></div>
</head>

<body class="">
    <div class="wrapper ">
        <div th:insert="~{user/common::sidebar(active='doctor_list.html')}"></div>
        <div class="main-panel">
            <!-- Navbar导航栏 -->
            <nav th:replace="~{user/common::navbar}"></nav>
            <!--搜索栏-->
            <div class="panel-header">
                <form id="search_form" th:action="@{/doctor/search}">
                    <div class="header text-center">
                        <h2 class="title">医生管理</h2>
                        <div class="input-group no-border col-sm-4 offset-4">
                            <input type="text" name="search" class="form-control" th:placeholder="${msg==null?'姓名,科室,或工作证号,联系方式...':msg}">
                            <span class="input-group-addon">
                            <i class="now-ui-icons ui-1_zoom-bold" onclick="$('#search_form').submit()"></i>
                        </span>
                        </div>
                        <p class="category">搜索医生,支持姓名,科室模糊查询,工作证号,联系方式精确查询。</p>
                    </div>
                </form>
            </div>
            <div class="content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title" style="display: inline">医生管理</h4>
                                <a class="btn-primary btn btn-lg text-white float-right" data-toggle="modal" data-target="#addDoctorModal" style="margin-right: 2rem">新增医生</a>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead class="text-primary">
                                            <th>
                                                医生ID
                                            </th>
                                            <th>
                                                医生姓名
                                            </th>
                                            <th>
                                                医生性别
                                            </th>
                                            <th>
                                                医生年龄
                                            </th>
                                            <th>
                                                联系方式
                                            </th>
                                            <th>
                                                所属科室
                                            </th>
                                            <th>
                                                操作
                                            </th>
                                        </thead>
                                        <tbody>
                                            <tr th:each="map,index:${maps}" th:id="${map.get('doctor_id')}">
                                                <td th:text="${map.get('doctor_id')}">
                                                工作证号
                                                </td>
                                                <td th:text="${map.get('doctor_name')}">
                                                    姓名
                                                </td>
                                                <td th:text="${map.get('doctor_gender')==1?'男':'女'}">
                                                    性别
                                                </td>
                                                <td th:text="${map.get('doctor_age')}">
                                                    年龄
                                                </td>
                                                <td th:text="${map.get('doctor_phone')}">
                                                    联系方式
                                                </td>
                                                <td th:text="${map.get('department_name')}">
                                                    所属部门
                                                </td>
                                                <td>
                                                    <a href="" class="btn btn-sm btn-info" data-toggle="modal" data-target="#updateDoctorModal" th:onclick="getDoctor([[${map.get('doctor_id')}]])">修改</a>
                                                    <a th:href="@{/doctor/delete/}+${map.get('doctor_id')}" class="btn btn-sm btn-danger">删除</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--底部footer-->
            <footer th:replace="~{user/common::footer}"></footer>
        </div>
    </div>
</body>

<!-- Modal -->
<!--Modal医生新增框-->
<div class="modal fade shadow-none p-3 mb-5 rounded" id="addDoctorModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="margin-top: 15rem">
            <div class="modal-header">
                <h5 class="modal-title">新增医生</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!--注册表单-->
                <form id="addDoctor_form">
                    <div class="form-group">
                        <input type="text" name="doctorName" class="form-control" placeholder="姓名" >
                    </div>

                    <div class="form-group">
                        <select name="doctorGender" class="form-control" placeholder="性别">
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <input type="number" name="doctorAge" class="form-control" placeholder="年龄">
                    </div>

                    <div class="form-group">
                        <input type="number" name="doctorPhone" class="form-control" placeholder="联系方式">
                    </div>

                    <div class="form-group">
                        <select name="departmentId" class="form-control" placeholder="性别">
                            <option th:each="department,index:${departments}" th:text="${department.getDepartmentName()}" th:value="${department.getDepartmentId()}"></option>
                        </select>
                    </div>

                    <div class="modal-footer">
                        <div style="color: red;margin: 0 auto;" id="regTip"></div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
                        <input type="button" class="btn btn-primary" onclick="addDoctor()" value="新增">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!--Modal医生修改框-->
<div class="modal fade shadow-none p-3 mb-5 rounded" id="updateDoctorModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="margin-top: 15rem">
            <div class="modal-header">
                <h5 class="modal-title">修改医生信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!--修改表单-->
                <form id="updateDoctor_form">
                    <!--隐藏域-->
                    <input type="text" name="doctorId" id="udId" hidden="hidden">

                    <div class="form-group">
                        <input type="text" name="doctorName" id="udName" class="form-control" placeholder="姓名">
                    </div>

                    <div class="form-group">
                        <select name="doctorGender" class="form-control" id="udGender" placeholder="性别">
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <input type="number" name="doctorAge" id="udAge" class="form-control" placeholder="年龄">
                    </div>

                    <div class="form-group">
                        <input type="number" name="doctorPhone" id="udPhone" class="form-control" placeholder="联系方式">
                    </div>

                    <div class="form-group">
                        <select name="departmentId" class="form-control" id="udDepartment">
                            <option th:each="department,index:${departments}" th:text="${department.getDepartmentName()}" th:value="${department.getDepartmentId()}"></option>
                        </select>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
                        <input type="button" class="btn btn-danger" onclick="updateDoctor()" value="修改">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    //新增医生
    function addDoctor(){
        var formData = $("#addDoctor_form").serialize();
        $.ajax({
            sync:false,
            url:'/doctor/add',
            data: formData,
            method:'post',
            dataType:'text',
            success:function(result){
                if(result==='添加成功!'){
                    demo.showNotification('success',result);
                    setTimeout(function (){
                        location.reload();
                    },1000)
                    return;
                }
                demo.showNotification('danger',result);
            }
        })
    }

    //获取医生信息到 Modal
    function getDoctor(id){
        var info = document.getElementById(id).children;
        console.log(info);
        console.log(info[0].innerHTML);
        $("#udId").val(info[0].innerHTML);
        $("#udName").val(info[1].innerHTML);
        $("#udAge").val(info[3].innerHTML);
        $("#udPhone").val(info[4].innerHTML);
        $("#udGender").val(info[2].innerHTML==='男'?1:0);
    }

    //更新医生信息
    function updateDoctor(){
        var formData = $("#updateDoctor_form").serialize();
        $.ajax({
            sync:false,
            url:'/doctor/update',
            data: formData,
            method:'post',
            dataType:'text',
            success:function(result){
                if(result==='修改成功!'){
                    demo.showNotification('success',result);
                    setTimeout(function (){
                        location.reload();
                    },1000)
                    return;
                }
                demo.showNotification('danger',result);
            }
        })
    }



</script>

<!--通用footerJs-->
<script th:replace="~{user/common::footerJs}"></script>

</html>
